<script>
import {quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      dataForm: {
        chapterName: '',
        courseName: '',
      },
      courseId: '',
      chapterId:'',
      dataRule: {
        chapterName: [
          {required: true, message: '章节名称不能为空', trigger: 'blur'}
        ],
      }
    }
  },
  created() {

    this.courseId = this.$route.query.courseId;
    this.dataForm.courseName = this.courseId;
    console.log(this.courseId)
  },
  methods: {



    dataFormSubmit(){
      this.request.post('/course/coursechapter/save',this.dataForm)
          .then(res=>{
            if (res.code===200){
              this.$message.success(res.message);
              this.chapterId=res.chapterId
              this.$router.push({
                path: '/publishSection',
                query: {
                  courseId: this.courseId,
                  chapterId: this.chapterId
                }
              });
            }else if (res.code===400){
              this.$message.error(res.message);

            }
          })
    }
  }
}
</script>

<template>

  <div class="container">
    <div style="margin-top: 10px;width: 800px;margin-left: 200px">
      <el-steps :active="2">
        <el-step title="发布课程" icon="el-icon-edit"></el-step>
        <el-step title="发布章节" icon="el-icon-upload"></el-step>
        <el-step title="发布小节" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>


    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="200px" style="margin-top: 10px">
      <el-form-item label="章节名称" prop="chapterName">
        <el-input style="width: 800px" v-model="dataForm.chapterName" placeholder="请输入章节名称"></el-input>
      </el-form-item>



      <span class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">发布</el-button>
      </span>
    </el-form>

  </div>
</template>


<style scoped>
.container {
  background-color: #fff;
  height: 100%;
  width: 1200px;
  margin-left: 200px;
  position: relative;
  display: flex;
  flex-direction: column; /* 使用列布局 */
  justify-content: space-between; /* 使子元素在容器中垂直方向上分布均匀 */
}

/* 将表单内容放在容器的上半部分 */


/* 将按钮放在底部 */
.dialog-footer {
  display: flex;

  justify-content: center;
  margin-bottom: 15px;
}
</style>